<!doctype>
<html>
<head>
	<meta charset="UTF-8">
<title>game</title>
<style>
    .containor{border:1px solid #999;position:absolute;background-color:#ffffff;width:595px;height:595px;}
    .kuai{float:left;background:url(http://pic.dbw.cn/0/08/95/46/8954644_618986.jpg) no-repeat;cursor:pointer;position:relative;}
</style>
<script>
    var game = {
        last : null,
        row : undefined,
        col : undefined,
        enabled : true,
        init : function(row,col){
            this.row = row;
            this.col = col;
            var main = document.getElementById("main");
            var height = main.clientHeight/row; 
            //可见高度
            var width = main.clientWidth/col;
            var arr = [];
            var tmpI = 0;
            for(var i=0;i<row;i++){
                for(var j=0;j<col;j++){
                    var posLeft = -width*j;
                    var posTop = -height*i;
                    arr.push('<div class="kuai" index="'+tmpI+'" style="width:'+width+'px;height:'+height+'px;background-position:'+posLeft+'px '+posTop+'px"></div>');
                    tmpI++;
                }
            }
            main.innerHTML = arr.join("");
            var list = main.getElementsByTagName("div");
            this.random(list); //随机打乱顺序
            this.click(list); //绑定click事件
        },
        random : function(list){
            var len = list.length;
            var m = Math;
            //打乱顺序
            for(var i=0;i<len/2;i++){
                var rNum1 = parseInt(m.random()*len);
                var rNum2 = parseInt(m.random()*len);
                var r1Obj = list[rNum1];
                var r2Obj = list[rNum2];
                r1Obj.parentNode.insertBefore(r1Obj,r2Obj);
            }
            this.last = list[len-1]; //记下它
            this.last.style.visibility = "hidden";
        },
        click : function(list){
            var len = list.length;
            var game = this;
            for(var i=0;i<len;i++){
                list[i].newIndex = i;
                list[i].onclick = function(){
                    if(!game.enabled){
                        return false;
                    }
                    var index = this.getAttribute("index");
                    var newIndex = this.newIndex;
                    var col = game.col;
                    var lObj,rObj,tObj,bObj;
                    if(newIndex-1>=0){
                        lObj = list[newIndex-1];
                    }
                    if(newIndex+1<len){
                        rObj = list[newIndex+1];
                    }
                    if(newIndex-col>=0){
                        tObj = list[newIndex-col];
                    }
                    if(newIndex+col<len){
                        bObj = list[newIndex+col];
                    }
                    var math = Math;
                    /*
                        条件3：判断点击的这个元素和不可见元素是否是在同一行
                    */
                    if(rObj && rObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((rObj.newIndex+1)/game.col)){ //向右移
                        var tmpIndex = this.newIndex;
                        this.newIndex = rObj.newIndex;
                        rObj.newIndex = tmpIndex;
                        rObj.parentNode.insertBefore(rObj,this);
                    }else if(lObj && lObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((lObj.newIndex+1)/game.col)){ //向左移
                        var tmpIndex = this.newIndex;
                        this.newIndex = lObj.newIndex;
                        lObj.newIndex = tmpIndex;
                        lObj.parentNode.insertBefore(this,lObj);           
                    }else if(bObj && bObj.style.visibility=="hidden"){ //向下移
                        var tmpIndex = this.newIndex;
                        bObj.parentNode.insertBefore(bObj,list[tmpIndex+1]);
                        bObj.parentNode.insertBefore(this,list[bObj.newIndex]);
                        bObj.parentNode.insertBefore(list[bObj.newIndex],this);
                        this.newIndex = bObj.newIndex;
                        bObj.newIndex = tmpIndex;
                    }else if(tObj && tObj.style.visibility=="hidden"){ //向上移
                        var tmpIndex = this.newIndex;
                        tObj.parentNode.insertBefore(this,list[tObj.newIndex]);
                        tObj.parentNode.insertBefore(tObj,list[tmpIndex]);
                        tObj.parentNode.insertBefore(list[tmpIndex],tObj);
                        this.newIndex = tObj.newIndex;
                        tObj.newIndex = tmpIndex;
                    }
                    if(game.isSuccess(list)){
                        game.enabled = false; //已经成功！停止游戏
                        alert("You win");
                        game.last.style.visibility = "visible";
                        game.animate(game.last,{
                            opacity : 0
                        },{
                            opacity : 1
                        },500);
                    }
                }
            }
        },
        animate : function(elt,p1,p2,speed){
             
        },
        isSuccess : function(list){
            var len = list.length;
            var bl = true;
            for(var i=0;i<len;i++){
                var o = list[i];
                if(o.newIndex!=o.getAttribute("index")){
                    bl = false;
                    break;
                }
            }
            return bl;
        }
    }
    onload = function(){
        game.init(3,3); //几行几列
    };
    
    
</script>

</head>
<body>
    <div id="main" class="containor">
         
    </div>
</body>
</html>